<template>
  <!-- 成交占比 -->
  <div ref="main" style="width: 100%; height: 300px"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  mounted() {
    var myChart = echarts.init(this.$refs.main);
    const option = {
      title: {
        text: '成功交易',
        left: 'center',
        bottom: 20,
        textStyle: {
          color: '#ccc',
        },
      },
      tooltip: {
        trigger: 'item',
      },
      visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
          colorLightness: [0, 1],
        },
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '55%',
          center: ['50%', '50%'],
          data: [
            { value: 310, name: '邮件' },
            { value: 274, name: '电话' },
            { value: 235, name: '信息' },
            { value: 400, name: '化妆品', color: '' },
          ].sort(function (a, b) {
            return a.value - b.value;
          }),
          roseType: 'radius',
          label: {
            color: 'rgba(25, 155, 55 )',
          },
          labelLine: {
            lineStyle: {
              color: 'rgba(0, 0, 0)',
            },
            smooth: 0.2,
            length: 10,
            length2: 20,
          },
          itemStyle: {
            color: (params) => {
              if (params.data.color) {
                return params.data.color;
              }
              return params.color;
            },
            shadowBlur: 200,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
            return Math.random() * 200;
          },
        },
      ],
    };
    option && myChart.setOption(option);
  },
};
</script>

<style></style>
